<template>
    <div>
        <mt-loadmore  :bottom-method="loadBottom" :autoFill="autoFill" :bottom-all-loaded="allLoaded" ref="loadmore">
      <mt-cell v-for="(item) in sitelist" :key="item.siteid">
        <div slot="title" class="title" @click="goEquipmentDetails(item.siteid)">
          <div class="desc">
             <div class="name">{{item.sitename}}</div>
             <div class="notes">{{item.sitedescripor}}</div>
          </div>
        </div>
        <div slot="icon" class="title-img" v-show="item.siteimageurl">
          <img :src="item.siteimageurl"/>
        </div>
      </mt-cell>
    </mt-loadmore>
    <not-data-page v-if="sitelist.length ===0"></not-data-page>
    </div>
</template>
<script>
import notDataPage from '@/component/notQueryDataPage.vue'
export default {
  data () {
    return {
      page: 1,
      pages: 0,
      sitelist: [],
      allLoaded: false,
      autoFill: false

    }
  },
  created () {
    this.getsitelist(0)
  },
  methods: {
    async getsitelist (type) {
      // 用type区分是否是第一请求，或者是上拉加载
      const parm = {
        page: this.page,
        pagesize: 20
      }
      const res = await this.$store.dispatch('sitelist', parm)
      if (res.status === '0') {
        this.pages = res.context ? res.context.length : 0
        type ? this.sitelist = [...this.sitelist, ...res.context] : this.sitelist = [...res.context]
      }
    },
    loadTop () {},
    async loadBottom () {
      this.$refs.loadmore.onBottomLoaded()
      if (this.pages < 20) {
        this.allLoaded = true
        return
      }
      this.page++
      await this.getsitelist(1)
    },
    goEquipmentDetails (siteid) {
      this.$router.push({
        path: '/sitedetail',
        query: {
          siteid
        }
      })
    }
  },
  components: {
    notDataPage
  },
  beforeDestroy () {
    this.toast && this.toast.close()
  }
}
</script>
<style lang="less" scoped>
.content {
  padding-top: 40px;
.mint-popup-bottom{
  width: 100%;
}
.mint-cell-title{
  height: 80px;
  .title{
    display: inline-block;
    margin: 10px 0 10px 10px;
 .desc{
   height: 60px;
   width: 200px;
   div{
     word-break: keep-all;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
     height: 30px;
     line-height: 30px;
   }
   .notes{
    color: #ccc;
  }
 }
}
}
.title-img{
  display: inline-block;
  margin: 10px 0;
  width: 60px;
  height: 60px;
  float: left;
  img{
    width: 100%;
    border-radius: 6px;
  }
}

}
</style>
